<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href="../../assets/images/logo.png">
  <link rel="stylesheet" href="../../assets/style/common.css">
  <link rel="stylesheet" href="../../assets/iconfont/iconfont.css">
  <link rel="stylesheet" href="./index.css">
  <script src="../../utils/index.js"></script>
  <script src="./index.js"></script>
  <title>热门旅游城市</title>
</head>
<body>
  <div class="page">
    <!-- top-bar -->
    <div class="top-bar fixed">
      <div class="top-bar-cont tpl clearfix">
        <div class="fl"><span class="top-bar-item">让天下没有难走的旅行</span></div>
        <div class="fr">
          <a href="javascript:;" class="top-bar-item brand-color">您好，请登录</a>
          <a href="javascript:;" class="top-bar-item line-right">免费注册</a>
          <a href="javascript:;" class="top-bar-item line-right"><span class="iconfont kyan-icon-message top-bar-msg"></span>消息</a>
          <a href="javascript:;" class="top-bar-item line-right">我的旅程</a>
          <a href="javascript:;" class="top-bar-item line-right">我的订单</a>
          <a href="javascript:;" class="top-bar-item line-right">客服中心</a>
          <a href="javascript:;" class="top-bar-item iconfont kyan-icon-phone brand-color"></a>
          <a href="javascript:;" class="top-bar-item iconfont kyan-icon-wechat brand-color"></a>
        </div>
      </div>
    </div>
    <!-- header -->
    <div class="header">
      <div class="header-cont tpl clearfix">
        <div class="header-logo fl"><img class="header-logo-img" src="../../assets/images/logo_large.png" alt="logo" /></div>
        <div class="header-search brand-border-color fr">
          <input class="header-filed fl" id="header-search" value="搜索旅行地/酒店/旅游/景点门票/交通" onfocus="clearSearch()" onblur="checkSearch()" />
          <span class="header-button fl brand-bgc"><span class="iconfont kyan-icon-search"></span></span>
        </div>
      </div>
    </div>
    <!-- nav-bar -->
    <div class="nav-bar brand-bgc">
      <div class="nav-bar-cont tpl text-center">
        <a href="../../index.html" class="nav-bar-item">首页</a>
        <a href="./index.html" class="nav-bar-item nav-bar-item-active">热门旅游城市</a>
        <a href="../sightsFood/index.html" class="nav-bar-item">风景美食</a>
        <a href="../culture/index.html" class="nav-bar-item">文化底蕴</a>
        <a href="../recommendedWay/index.html" class="nav-bar-item">路线推荐</a>
        <a href="../teamShow/index.html" class="nav-bar-item">团队介绍</a>
      </div>
    </div>
    <!-- container -->
    <div class="container hot-city-container">
      <div class="tpl">
        <!-- city-top -->
        <div class="city-top clearfix has-hand">
          <div class="city-detail fl clearfix">
            <div class="city-detail-item fl">
              <span class="iconfont kyan-icon-location brand-color"></span>
              <span class="city-detail-item-txt sub-color">上海</span>站
            </div>
            <div class="city-detail-item fl city-detail-item-two">
              <span class="iconfont kyan-icon-airplane brand-color"></span>
              <span class="iconfont kyan-icon-bed brand-color"></span>
              <span class="city-detail-item-txt sub-color">飞+酒</span>
            </div>
          </div>
          <div class="city-search fr clearfix brand-border-color">
            <div class="city-category fl">
              <select class="city-category-list">
                <option value="全部商品">全部商品</option>
                <option value="参团">参团</option>
                <option value="自由行">自由行</option>
                <option value="私家团">私家团</option>
                <option value="游轮">游轮</option>
                <option value="高端游">高端游</option>
                <option value="一日游">一日游</option>
                <option value="签证">签证</option>
              </select>
            </div>
            <input class="city-search-value inline-block" id="city-search" value="请输入目的地、主题或关键字" />
            <a href="javascript:;" class="city-search-button inline-block brand-bgc">
              <span class="iconfont kyan-icon-search"></span>
              <span>搜 索</span>
            </a>
          </div>
        </div>
        <!-- city-centre -->
        <div class="city-centre clearfix">
          <div class="city-sidebar fl">
            <div class="city-sidebar-item clearfix">
              <div class="city-siderbar-left fl">
                <div class="city-siderbar-icon iconfont kyan-icon-balloon brand-color"></div>
              </div>
              <div class="city-siderbar-info fl">
                <div class="city-sidebar-name has-hand">主题旅行</div>
                <div class="city-sidebar-txt-list">
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">爸妈游</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">迪士尼</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">蜜月游</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">游轮游</a>
                </div>
              </div>
              <a href="javascript:;" class="city-siderbar-right iconfont kyan-icon-right fr brand-color fw700"></a>
            </div>
            <div class="city-sidebar-item clearfix">
              <div class="city-siderbar-left fl">
                <div class="city-siderbar-icon iconfont kyan-icon-bus brand-color"></div>
              </div>
              <div class="city-siderbar-info fl">
                <div class="city-sidebar-name has-hand">周边旅行</div>
                <div class="city-sidebar-txt-list">
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">杭州</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">苏州园林</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">南京</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">黄山</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">无锡</a>
                </div>
              </div>
              <a href="javascript:;" class="city-siderbar-right iconfont kyan-icon-right fr brand-color fw700"></a>
            </div>
            <div class="city-sidebar-item clearfix">
              <div class="city-siderbar-left fl">
                <div class="city-siderbar-icon iconfont kyan-icon-mountain brand-color"></div>
              </div>
              <div class="city-siderbar-info fl">
                <div class="city-sidebar-name has-hand">境内旅游</div>
                <div class="city-sidebar-txt-list">
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">三亚</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">成都</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">杭州</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">武汉</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">长沙</a>
                </div>
              </div>
              <a href="javascript:;" class="city-siderbar-right iconfont kyan-icon-right fr brand-color fw700"></a>
            </div>
            <div class="city-sidebar-item clearfix">
              <div class="city-siderbar-left fl">
                <div class="city-siderbar-icon iconfont kyan-icon-macao brand-color"></div>
              </div>
              <div class="city-siderbar-info fl">
                <div class="city-sidebar-name has-hand">港澳台(中国)</div>
                <div class="city-sidebar-txt-list">
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">台北</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">金门</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">高雄</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">花莲</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">台中</a>
                </div>
              </div>
              <a href="javascript:;" class="city-siderbar-right iconfont kyan-icon-right fr brand-color fw700"></a>
            </div>
            <div class="city-sidebar-item clearfix">
              <div class="city-siderbar-left fl">
                <div class="city-siderbar-icon iconfont kyan-icon-lamian brand-color"></div>
              </div>
              <div class="city-siderbar-info fl">
                <div class="city-sidebar-name has-hand">日本</div>
                <div class="city-sidebar-txt-list">
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">北海道</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">东京</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">大阪</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">京都</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">名古屋</a>
                </div>
              </div>
              <a href="javascript:;" class="city-siderbar-right iconfont kyan-icon-right fr brand-color fw700"></a>
            </div>
            <div class="city-sidebar-item clearfix">
              <div class="city-siderbar-left fl">
                <div class="city-siderbar-icon iconfont kyan-icon-coco brand-color"></div>
              </div>
              <div class="city-siderbar-info fl">
                <div class="city-sidebar-name has-hand">东南亚</div>
                <div class="city-sidebar-txt-list">
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">巴厘岛</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">普吉岛</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">马尔代夫</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">马德里</a>
                </div>
              </div>
              <a href="javascript:;" class="city-siderbar-right iconfont kyan-icon-right fr brand-color fw700"></a>
            </div>
            <div class="city-sidebar-item clearfix">
              <div class="city-siderbar-left fl">
                <div class="city-siderbar-icon iconfont kyan-icon-rome brand-color"></div>
              </div>
              <div class="city-siderbar-info fl">
                <div class="city-sidebar-name has-hand">欧洲</div>
                <div class="city-sidebar-txt-list">
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">俄国</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">瑞士</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">冰岛</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">塞尔维亚</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">英国</a>
                </div>
              </div>
              <a href="javascript:;" class="city-siderbar-right iconfont kyan-icon-right fr brand-color fw700"></a>
            </div>
            <div class="city-sidebar-item clearfix">
              <div class="city-siderbar-left fl">
                <div class="city-siderbar-icon iconfont kyan-icon-liberty brand-color"></div>
              </div>
              <div class="city-siderbar-info fl">
                <div class="city-sidebar-name has-hand">美洲</div>
                <div class="city-sidebar-txt-list">
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">塞班岛</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">加拿大</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">夏威夷</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">洛杉矶</a>
                </div>
              </div>
              <a href="javascript:;" class="city-siderbar-right iconfont kyan-icon-right fr brand-color fw700"></a>
            </div>
            <div class="city-sidebar-item clearfix">
              <div class="city-siderbar-left fl">
                <div class="city-siderbar-icon iconfont kyan-icon-elephant brand-color"></div>
              </div>
              <div class="city-siderbar-info fl">
                <div class="city-sidebar-name has-hand">澳新南太中东非</div>
                <div class="city-sidebar-txt-list">
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">迪拜</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">澳大利亚</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">新西兰</a>
                  <a href="javascript:;" class="city-sidebar-txt-item has-hand">土耳其</a>
                </div>
              </div>
              <a href="javascript:;" class="city-siderbar-right iconfont kyan-icon-right fr brand-color fw700"></a>
            </div>
          </div>
          <div class="city-ad fr">
            <div class="swipe div-center">
              <img src="../../assets/images/hotCity/swipe/swipe1.jpg" class="swipe-item swipe-item-active" id="swipe-item1" />
              <img src="../../assets/images/hotCity/swipe/swipe2.jpg" class="swipe-item" id="swipe-item2" />
              <img src="../../assets/images/hotCity/swipe/swipe3.jpg" class="swipe-item" id="swipe-item3" />
            </div>
            <div class="city-banner-list clearfix">
              <img src="../../assets/images//hotCity/banner/banner1.jpg" class="city-banner-img has-hand fl">
              <img src="../../assets/images//hotCity/banner/banner2.jpg" class="city-banner-img has-hand fl">
              <img src="../../assets/images//hotCity/banner/banner3.jpg" class="city-banner-img has-hand fl no-mr">
            </div>
            <div class="city-banner-list clearfix">
              <img src="../../assets/images//hotCity/banner/banner4.jpg" class="city-banner-img-horizontal has-hand fl">
              <img src="../../assets/images//hotCity/banner/banner5.jpg" class="city-banner-img-horizontal has-hand fl no-mr">
            </div>
            <div class="city-banner-list clearfix">
              <img src="../../assets/images//hotCity/banner/banner6.jpg" class="city-banner-img-max has-hand fl">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <!-- <div class="footer">
      <div class="tpl">
      </div>
    </div> -->
    <!-- copyright -->
    <div class="copyright">
      <div class="tpl text-center">
        <div class="copyright-info">
          <img src="../../assets/images/logo.png" class="copyright-logo" alt="logo">
          <span class="copyright-name">小米旅行</span>
        </div>
        <div class="copyright-support">小米团队提供技术支持</div>
      </div>
    </div>
  </div>
</body>
</html>